<template>
	<view>
		<global-navgation title="产品方案表"></global-navgation>
		<view class="product-container">
			<view class="select-font">
				<view class="selectProduct">选择产品</view>
				<view class="selectCount">选择数量</view>
			</view>

			<view class="select-item" v-for="(v,i) in affirmProduct" :key="i">
				<view class="pick-container">
					<picker mode="selector" :range="listData" range-key="goodName" @change="change($event,i)">
						<text class="product" :style="{color:colors[i]}">{{v.goodName}}</text>
						<uni-icons type="arrowdown" class="icon" style="margin-top: 15rpx;" size="15"></uni-icons>
					</picker>
				</view>
				<view class="count">
					<view @click="reduceCount(v.count,i)">-</view>
					<input type="text" v-model="v.count" @input="changeCount($event,i)" />
					<view @click="addCount(v.count,i)">+</view>
				</view>
			</view>
			<view class="submit">
				<button type="default" @click="skipProduct">提交</button>
			</view>
		</view>




	</view>
</template>

<script>
	import globalNavgation from '../../components/globalNavgation.vue'
	export default {
		components: {
			globalNavgation
		},
		data() {
			return {
				colors: ['', '', '', '', '', '', '', '', ''],
				listData: [],
				affirmProduct: [],
				tokens:''
			}
		},
		mounted() {
			// 初始化获取数据
			this.__initClassData()

		},
		created() {

		},
		onLoad(){
			uni.getStorage({
			    key: 'token',
			    success:  res=> {
					this.tokens=res.data
					console.log('mmm',this.tokens)
			    }
			});
		},
		methods: {

			__initClassData() {
				this.$api.get({
					url: '/goods/good/get_list',
					data: {
						token: 'os2rftxaXgM0vWL1QzOH'
					}
				}).then(res => {
					this.listData = res.list.data
					this.listData.forEach((v,i)=>{
						// this.$set如果我们直接为对象增加新属性并赋值、数组的增删，并不会触发页面的更新，这是由于vue2监听方式的问题
						this.$set(this.affirmProduct,i,{goodName:'请选择产品',count:0,price:0,type:0})
					})
					console.log(this.affirmProduct)
					console.log(res)
					
					// console.log(this.affirmProduct)
					// console.log(this.listData)
					// console.log(123,this.$store.list)
				})
			},
			addCount(v, i) {
				// 做判断
				if (v > 999 || v == 999 || this.affirmProduct[i].goodName === '请选择产品') return
				this.affirmProduct[i].count++
			},
			reduceCount(v, i) {
				if (v == 0 || v < 1) return
				this.affirmProduct[i].count--
			},
			changeCount(v, i) {
				if (this.affirmProduct[i].goodName === '请选择产品') {
					this.affirmProduct[i].count = v.detail.value
					// 总的来说，假设我们更改了某个 dom 元素内部的文本，而这时候我们想直接打印这个更改之后的文本是需要 dom 更新之后才会实现的，
					// 就像我们把将要打印输出的代码放在 setTimeout(fn, 0) 中
					this.$nextTick(() => {
						this.affirmProduct[i].count = 0
					})
					return
				}
				this.affirmProduct[i].count =v.detail.value
					this.$nextTick(() => {
						// 正则判断
						let num = `${v.detail.value}`.match(/\d+/g).reduce((total, v) => total + v)
						this.affirmProduct[i].count = parseInt(num) > 999 ? 999 : parseInt(num)
					})
			},
			change(e, i) {
				this.affirmProduct[i].goodName = this.listData[e.detail.value].goodName
				this.affirmProduct[i].price = this.listData[e.detail.value].sellingPrice
				this.colors[i] = '#000'
				this.affirmProduct[i].type=this.listData[e.detail.value].discount
				console.log(this.affirmProduct[i].sellingPrice)
			},
			skipProduct() {
				let product = this.affirmProduct
				product = product.filter(v => v.goodName != '请选择产品' && v.count != 0)
				if (product.length) {
					uni.navigateTo({
						url: `./product-two?product=${JSON.stringify(product)}`
					})
				} else{
					uni.showToast({
						icon: 'none',
						title: '亲，请选择产品和数量'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.select-item {
		width: 686rpx;
		height: 80rpx;
		margin: 0 auto;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 28rpx;
		line-height: 80rpx;
		color: rgba(0, 0, 0, 0.25);
		margin-bottom: 25rpx;
		position: relative;
	}

	.select-item .pick-container {
		width: 458rpx;
		height: 80rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		border-radius: 8rpx;
		position: relative;
	}

	.select-item .pick-container .product {
		margin-left: 20rpx;
		line-height: 80rpx;
	}

	.icon {
		position: absolute;
		right: 30rpx;
	}

	.product-container {
		width: 100%;
		height: 1308rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 600;
		font-size: 36rpx;
		color: rgba(0, 0, 0, 0.85);
	}

	.product-container .select-font {
		position: relative;
		height: 120rpx;
		width: 100%;
	}

	.product-container .select-font .selectProduct {
		position: absolute;
		top: 48rpx;
		left: 32rpx;
	}

	.product-container .select-font .selectCount {
		position: absolute;
		top: 48rpx;
		right: 100rpx;
	}

	.product-container .select-item .count {
		position: absolute;
		width: 212rpx;
		height: 80rpx;
		top: 0;
		right: 0;
		display: flex;
		line-height: 80rpx;
		color: rgba(0, 0, 0, 0.65);
	}

	.product-container .select-item .count view {
		width: 53rpx;
		text-align: center;
		height: 76rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.2);
		border-radius: 10rpx 0 0 10rpx;
		line-height: 76rpx;
	}

	.product-container .select-item .count view:nth-child(3) {
		border-radius: 0 10rpx 10rpx 0;
	}

	.product-container .select-item .count input {
		width: 106rpx;
		text-align: center;
		height: 76rpx;
		line-height: 76rpx;
		border-top: 2rpx solid rgba(0, 0, 0, 0.2);
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.2);
	}


	.submit {
		width: 100%;
		height: 140rpx;

		box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.08);
	}

	.submit button {
		margin-top: 20rpx;
		width: 686rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 36rpx;
		color: #F7F7F7;
		background: linear-gradient(90deg, #3965FF 0%, rgba(57, 101, 255, 0.8) 100%);
		border-radius: 4px;
	}
</style>
